<template>
    <main>
        <div class="order-container" v-for="card in content" :key="`order-${card}`" :id="`order-${card}`">
            <!-- 订单状态 -->
            <div class="status">交易成功</div>

            <!-- 商家 -->
            <div class="topic">
                <img src="../../components/icons/用户_L.svg" alt="用户图标">
                <span class="seller">商家: {{ card['order']['seller'] }}</span>  
            </div>

            <!-- 商品像素画 -->
            <div class="appearance">
                <div v-for="i in 4" :key="i" class="ul">
                    <div v-for="j in 4" :key="`${i}-${j}`" :id="`M${i}-${j}`" :style="`background-color: ${card['product']['appearance']['colors'][i-1][j-1]};`"></div>
                </div>
            </div>

            <!-- 内容块 -->
            <div class="item-container">
                <div class="item">
                    <img src="../../components/icons/胶囊_L.svg" alt="胶囊图标">
                    <span>产品: <b>{{ card['product']['name'] }}</b></span>
                </div>

                <div class="item">
                    <img src="../../components/icons/价格.svg" alt="价格图标">
                    <span>价格: <b>{{ card['product']['price'] }}</b></span>
                </div>

                <div class="item">
                    <img src="../../components/icons/时间.svg" alt="时间图标">
                    <span>过期: <b>{{ card['product']['expires_at'].split('T')[0] }}</b></span>
                </div>
            </div>


            <!-- 商品描述 -->
            <div class="description">{{ card['product']['description'] }}</div>
        </div>
    </main>
</template>

<script setup>
import { Api } from '@/assets/js/api';
import { onMounted, ref } from 'vue';

//登录验证保护
const api = new Api();
api.check_session()

//获取订单信息
const content = ref([])   //用于遍历订单数量
onMounted(async () => {
    const response = await api.get_orders()
    content.value = response;
})
</script>

<style scoped src="./order.css"></style>